<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./echarts.js"></script>
    <script src="./jQuery.js"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=B6n9e1QfLYUPaiBBPb7IPFSqOTkNjC5N"></script>
    <script type="text/javascript" src="//bj.bcebos.com/v1/mapopen/api-demos/data/province.js"></script>
    <title>Document</title>
</head>
    <style>
        .cont {
            display: flex;
        }
        .list {
            width: 442px;
        }
    </style>
    <style>
        /* html,
        body,
        #allmap {
            width: 1700px;
            height: 600px;
            padding: 0;
            margin: 0;
            overflow: hidden;
        } */
         html,
        body,
        #container {
            width: 1700px;
            height: 600px;
            overflow: hidden;
            margin: 0;
            padding: 0
        }

        .info {
            z-index: 999;
            width: auto;
            padding: 10px;
            margin-left: 10px;
            position: fixed;
            top: 10px;
            background-color: #fff;
            border-radius: 5px;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }

        .selbox {
            margin: 8px 0;
        }

        select {
            width: 180px;
            height: 30px;
            border: 1px solid #ddd;
        }
    </style>
<body>
    <div class="cont">
        <div class="list"></div>
        <div id="main" style="width: 700px;height:400px;"></div>
        <div id="container"></div>
        
    </div>
</body>
<script>
    // 获取数据
    getHouse()
    function getHouse() {
        $.ajax({
            type: "get",
            url: "data/getHouse.json",
            data: {
                id: "AREA|88cff55c-aaa4-e2e0"
            },
            success: function (response) {
                let area = []
                let count = []
                let data = response.body.filter(function (item) {
                    return item.count > 80
                })
                data.forEach(item => {
                    area.push(item.label)
                    count.push(item.count)
                });
                showHouse(area, count)
            }
        });
    }

    // 将数据渲染到柱状图
    function showHouse(area, count) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                type: 'category',
                data: area
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: count,
                    type: 'bar',
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        };
        myChart.setOption(option);
        var array = option.xAxis.data
        array.forEach(item => {
            let module = `
                <input type="button" value="${item}" class ="btn">
            `
            $('.list').append(module)
        });
        $('.btn').on('click',function(){
            theLocation(this.value)
        })
    }

    // 点击获取城市所在地
    theLocation('丰台')
    function theLocation(city){
        var map = new BMapGL.Map('container');
            map.centerAndZoom(new BMapGL.Point(116.331398, 39.897445), 11);
            map.enableScrollWheelZoom();
            var zoomCtrl = new BMapGL.ZoomControl();
            map.addControl(zoomCtrl);
    
            // --- 添加行政区划 ---
            var dist = new BMapGL.DistrictLayer({
                name: `(${city})`,
                kind: 1,
                fillColor: '#618bf8',
                fillOpacity: .3,
                strokeColor: '#daeafa',
                viewport: true
            });
            map.addDistrictLayer(dist);
    }
</script>

</html>